<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 10px">
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="primary"
        icon="el-icon-document"
        @click="handleExport"
      >导出</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="primary"
        icon="el-icon-document"
        @click="handleImport"
      >导入</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="getChildrens"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="dictCode" label="编码" />
      <el-table-column prop="value" label="值" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
    <el-dialog title="导入" :visible.sync="dialogVisible">
      <el-form label-position="right" label-width="170px">
        <el-form-item
          label="文件"
        ><el-upload
          action="http://localhost:9001/admin/cmn/dict/importData"
          :multiple="false"
          :on-success="onUploadSuccess"
          class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dictList } from '@/api/dict'
export default {
  data() {
    return {
      list: [],
      dialogVisible: false
    }
  },
  created() {
    this.getDictList(1)
  },
  methods: {
    getDictList(id) {
      dictList(id).then((rep) => {
        this.list = rep.data
      })
    },
    getChildrens(tree, treeNode, resolve) {
      dictList(tree.id).then((rep) => {
        resolve(rep.data)
      })
    },
    handleExport() {
      window.location.href = '/api/admin/cmn/dict/exportData'
    },
    handleImport() {
      this.dialogVisible = true
    },
    onUploadSuccess() {
      this.dialogVisible = false
      this.getDictList(1)
    }
  }
}
</script>
